<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
</head>
<style>
    .warp{width: 100%;}

    /*开通vip*/
    .vip-box{width: 100%;background: #FFFFFF;height: 50px;padding: 0 15px;box-sizing: border-box;font-size: 13px;margin-top: 10px;align-items: center;}
    .vip-box .text{font-size: 13px;color: #555252;}
    .vip-box .vip-btn{width: 92px;height: 36px;background: #FF9502;text-align: center;line-height: 36px;color: #FFFFFF;}

 	/*购物车列表*/
	.cart-list{width: 100%;margin-top: 10px;}
	.cart-list .cart-one{width: 100%;background: #FFFFFF;margin-bottom: 10px;}
	.cart-list .cart-one .top-box{width: 100%;align-items:center;}
	.cart-list .cart-one .top-box .dian-logo{width: 30px;height: 30px;overflow: hidden;align-items: center;justify-content: center;}
	.cart-list .cart-one .top-box .dian-logo img{width: 100%;display: block;}
	.cart-list .cart-one .top-box .dian-name{padding: 0 10px;box-sizing: border-box;font-size: 14px;color: #4D4F50;}
	.cart-list .cart-one .top-box .dian-goto{width: 44px;height: 44px;background:url(../../image/main2/goto.png) no-repeat center;background-size:13px;}
	.cart-list .cart-one .shop-box{width: 100%;}
	.cart-list .cart-one .shop-box .shop-one{width: 100%;padding: 15px 15px 15px 0;box-sizing: border-box;align-items: center;}
	.cart-list .cart-one .shop-box .shop-one .shop-img{width: 88px;height: 88px;flex-shrink: 0;overflow: hidden;}
	.cart-list .cart-one .shop-box .shop-one .shop-img img{width:100%;display: block;line-height: 0;}
	.cart-list .cart-one .shop-box .shop-one .shop-info{height: 88px;padding-left: 12px;box-sizing: border-box;overflow: hidden;flex-direction: column;}
	.cart-list .cart-one .shop-box .shop-one .shop-info .shop-name{font-size: 14px;color: #4D4F50;line-height: 16px;}
	.cart-list .cart-one .shop-box .shop-one .shop-info .shop-guige{width: 100%;font-size: 12px;color: #999999;padding-top: 2px;box-sizing: border-box;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .shop-guige .guige-text{width:auto;max-width: 100%;height: 24px;line-height: 24px;display:inline-block;padding-right:20px;box-sizing: border-box;
    background: url(../../image/main2/down.png) no-repeat right 4px top 6px;background-size:7px;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .shop-guige .guige-icon{width: 7px;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .price{width: 100%;align-items: center;box-sizing: border-box;height: 24px;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .price .left{font-size: 18px;color: #FF9502;font-weight: bold;}
	.cart-list .cart-one .shop-box .shop-one .shop-info .price .num-info{flex-shrink: 0;text-align: center;line-height: 24px;}
	.cart-list .cart-one .shop-box .shop-one .shop-info .price .num-info .sub{width: 24px;height: 24px;background:url(../../image/main2/sub.png) no-repeat center;background-size:10px;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .price .num-info .sub.no{background:url(../../image/main2/sub1.png) no-repeat center;background-size:10px;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .price .num-info .buynum{width: 36px;height: 24px;color: #333333;}
	.cart-list .cart-one .shop-box .shop-one .shop-info .price .num-info .add{width: 24px;height: 24px;background:url(../../image/main2/add.png) no-repeat center;background-size:10px;}
    .cart-list .cart-one .shop-box .shop-one .shop-info .price .num-info .add.no{background:url(../../image/main2/add1.png) no-repeat center;background-size:10px;}

    /*推荐商品*/
   	.tuijian-box{width: 100%;}
	.tuijian-box .tuijian-title{width: 100%;height: 50px;text-align: center;line-height: 50px;font-size: 16px;color: #4D4F50;font-weight:500;align-items: center;justify-content: center;}
	.tuijian-box .tuijian-title .text{display: inline-block;color: #4D4F50;font-size: 16px;position: relative;font-weight: bold;}
    .tuijian-box .tuijian-title .text:after{display: block;width: 8px;height: 8px;border-radius:50%;background:#D8D8D8;content:"";position: absolute;top: 50%;margin-top: -4px;left: -20px;}
	.tuijian-box .tuijian-title .text:before{display: block;width: 8px;height: 8px;border-radius:50%;background:#D8D8D8;content:"";position: absolute;top: 50%;margin-top: -4px;right: -20px;}

	/*凑单提示*/
	.coudan-box{width: 100%;background: #FFFFFF;align-items: center;padding: 0 15px;box-sizing: border-box;height: 34px;font-size: 12px;color: #FF9502;position: fixed;width: 100%;left: 0;bottom: 44px;}
	.coudan-box .coudan-goto{width: 13px;height: 13px;}

	/*底部的结算按钮*/
	.jiesuan-box{width: 100%;height: 50px;background: #FFFFFF;position: fixed;left: 0;bottom: 0;z-index: 999;align-items: center;}
	.jiesuan-box .sel-all{width: 45px;height: 50px;padding: 0 10px 0 15px;background: url(../../image/main2/sel_icon0.png) no-repeat 15px center;background-size:20px;box-sizing: border-box;flex-shrink: 0;}
	.jiesuan-box .price{align-items: center;color: #4D4F50;font-size: 14px;}
	.jiesuan-box .price .t2{text-align: right;padding-right: 16px;box-sizing: border-box;font-size: 12px;}
	.jiesuan-box .price .t2 span{font-size: 14px;font-weight: 700;color: #FF9502;}
	.jiesuan-box .btn-box{width: 100px;background:#FF9502;text-align: center;line-height: 50px;color: #FFFFFF;font-size: 14px;}

	/*选中和未选中样式*/
	.select{width: 45px;height: 44px;padding: 0 10px 0 15px;background: url(../../image/main2/sel_icon0.png) no-repeat 15px center;background-size:20px;box-sizing: border-box;flex-shrink: 0;}
	.select.on{background: url(../../image/main2/sel_icon1.png) no-repeat 15px center;background-size:20px;}

</style>
<body>
	<div id="vue" class="warp">

	    <!--购物车内容-->
	    <div class="cart-list">

	    	<div class="cart-one" v-for="(item,key) in Pdata.listData">
	    		<!--店铺信息-->
	    		<div class="top-box flex border-bottom">
	    			<div class="sel-dian select" tapmodel onclick="checkStoreAllClick(this);"></div>
    				<div class="dian-logo flex"><img :src="item.fenzuIcon"/ ></div>
    				<div class="dian-name flex1" v-text="item.fenzuTitle" :data-id="item.fenzuId" :data-title="item.fenzuTitle" tapmode onclick="open_pingpai(this)"></div>
	    			<div class="dian-goto" :data-id="item.fenzuId" :data-title="item.fenzuTitle" tapmode onclick="open_pingpai(this)"></div>
	    		</div>
	    		<!--店铺的商品信息-->
	    		<div class="shop-box">
	    			<div class="shop-one flex" v-for="(i,v) in item.goods">
	    				<div class="sel-one select" tapmodel onclick="checkStoreClick(this);" :data-id="i.cartid" :data-price="i.price" :data-vipprice="i.vipprice"></div>
	    				<div class="shop-img" :data-id="i.sid" tapmode onclick="open_goods(this);"><img :src="i.image"/></div>
	    				<div class="shop-info flex1 flex">
	    					<div class="shop-name han_1" v-text="i.title"></div>
	    					<div class="shop-guige han_1 flex1" :data-index1="key" :data-index2="v" :data-ggstr="i.ggstr" :data-cartid="i.cartid" tapmode onclick="openSkuBox(this)">
	    					    <div class="guige-text han_1" v-text="i.ggstr" v-if="i.ggstr"></div>
	    					</div>
	    					<div class="price flex" >
	    						<div class="left flex1 han_1" v-text="'¥' + i.price" ></div>
								<!--商品数量-->
								<div class="num-info border-all flex">
									<div :class="['sub border-right', i.buynum > 1 ? '':'no']" :data-cartid="i.cartid" :data-price="i.price" data-action="dec" tapmode onclick="setBuyNumClick(this);"></div>
									<div class="buynum" v-text="i.buynum" :id="i.cartid"></div>
									<div class="add border-left" :data-cartid="i.cartid" :data-price="i.price" data-action="inc" tapmode onclick="setBuyNumClick(this);"></div>
								</div>
							</div>
	    				</div>
	    			</div>
	    		</div>
	    	</div>

            <!--占位图-->
			<div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
	            <img src="../../image/no_page/no_cart.png" />
	            <p>暂无商品</p>
	        </div>

	    </div>

	    <!--推荐商品-->
   		<div class="tuijian-box" v-if="!Pdata.tuijian_goods || Pdata.tuijian_goods.length > 0">
			<div class="tuijian-title flex"><div class="text">推荐商品</div></div>
            <div class="shop-list flex">
                <div class="shop-one" v-for="(item,key) in Pdata.tuijian_goods" :data-id="item.sid" :data-type="item.type" tapmode onclick="open_goods(this)">
                    <div class="img-box bgpic" :style="{backgroundImage:'url('+item.image+')'}"></div>
                    <div class="shop-info">
                        <div class="name han_2" v-text="item.title"></div>
                        <div class="price-box flex">
                            <div class="price" v-text="'¥'+item.price"></div>
                            <div class="p3" v-if="item.price_del" v-text="'¥' + item.price_del"></div>
                            <div class="num-box flex1" v-text="'已售'+item.buy_nums"></div>
				 		</div>
                    </div>
                </div>
            </div>
	    </div>

	    <!--凑单提示-->
	    <!-- <div class="zhanwei"style="width: 100%;height: 34px;" style="display:none;" :style="{ display:(coudanShow == 1 ? '':'none')}"></div>
	    <div class="coudan-box flex" style="display:none;" :style="{ display:(coudanShow == 1 ? '':'none')}" tapmode data-id="0" onclick="open_shoplist(this)">
	    	<div class="t1 flex1" >购买<i v-text="Pdata.max"></i>元享包邮权益</div>
	    	<div class="t2">去凑单</div>
	    	<img class="coudan-goto" src="../../image/main2/coudan_goto.png"/>
	    </div> -->

	    <!--底部的结算按钮-->
	    <div class="zhanwei"style="width: 100%;height: 50px;"></div>
	    <div class="jiesuan-box flex sbx">
	    	<div class="sel-all select" tapmode onclick="checkAllClick()"></div>
	    	<div class="price flex flex1">
	    		<div class="t1">全部</div>
	    		<div class="t2 flex1" style="display:none;" :style="{ display:(isedit == 0 ? '':'none')}">合计：<span id="zjia">￥0.00</span></div>
	    	</div>
	    	<div class="btn-box" style="display:none;" :style="{ display:(isedit == 0 ? '':'none')}" tapmode onclick="goPayClick()">结算</div>
	    	<div class="btn-box" style="display:none;" :style="{ display:(isedit == 1 ? '':'none')}" tapmode onclick="deleteClick()" v-text="'删除(' + delLenght + ')'"></div>
	    </div>
	</div>

</body>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lazyload,L/h-tool"></script>
<script type="text/javascript">
    define(function (require, exports, module) {

        getData = function(loading) {
            var udata = lanYun.getUdata();
            if(!udata) return;
            lanYun.page = 1;
            lanYun.getVueData({ url:'storesCart',cache:true,loading:loading},function(ret) {
                //console.log(JSON.stringify(ret))
                $('.select').removeClass('on');
                $('#zjia').html('￥0.00');
                if(ret.errcode == 0){
                    lanYun.vue.max = ret.data.max;
                }
            });
        };
        lanYun.newVue('#vue',{
        	Pdata:{listData:[]},
        	isedit: 0,
            delLenght:0,
            max:0,
            coudanShow:1,
            zjia:0
        },function() {
            //getData(0);
        });

        //滚动加载..
	    new auiScroll({distance:200, listen:true},function(ret) {
	        if($(window).scrollTop() < 2) ret.isToBottom = false;
	        if(!ret.isToBottom) return;
	        //if(lanYun.ajaxSta) _page.getData();
	    });

        //-------------------------------

        //初始状态
        init = function (){
            lanYun.vue.isedit = 0;
            $('.select').removeClass('on');
            $("#zjia").html('0.00');
        }

        //编辑事件
        editClick = function (sta) {
        	lanYun.vue.isedit = sta;
            if(sta){
                lanYun.vue.delLenght = $(".shop-box .on").length;
            }
            jisuan();
        };
        //删除
        deleteClick = function () {
            var ids = [];
            $(".shop-box .on").each(function() {
                var dst = this.dataset;
                ids.push(dst.id);
            });
            if(ids.length == 0){
                lanYun.toast('请选择商品');
                return;
            }
            lanYun.alert({fname:'diaLogBox1',title:'提示', button:['取消','确定'],content: '确认删除购物车商品吗？'},function(ret){
	            if (ret.index == 0) return;
                lanYun.post('storesCart/del',{cartids:ids},function (ret) {
                    if(ret.errcode==0) {
                        lanYun.event('updatecart');
                        $(".select").each(function(){
                            $(this).removeClass('on');
                        });
                        lanYun.vue.delLenght = 0;
                    }
                },2);
	        });
        };
        //单选
        checkStoreClick = function(tis) {
            var self = $(tis);
            if(self.hasClass('on')){
                self.removeClass('on');
            }else{
                self.addClass('on');
            }
            setStoreALLSelect(tis);
            setALLSelect();
          	jisuan();

            // 计算删除商品长度
            if(lanYun.vue.isedit == 1){
                lanYun.vue.delLenght = $(".shop-box .on").length;
            }
        };
        //店铺全选
        checkStoreAllClick = function(tis) {
            var self = $(tis);
            if(self.hasClass('on')){
                self.removeClass('on');
                self.parent().next().find('.select').each(function () {
                    $(this).removeClass('on');
                });
            }else{
                self.addClass('on');
                self.parent().next().find('.select').each(function () {
                    $(this).addClass('on');
                });
            }
            setALLSelect();
            jisuan();
            // 计算删除商品长度
            if(lanYun.vue.isedit == 1){
                lanYun.vue.delLenght = $(".shop-box .on").length;
            }
        };
        //全选
        checkAllClick = function(tis) {
            var self = $('.jiesuan-box .select');
            if(self.hasClass('on')){
                $(".select").each(function(){
                    $(this).removeClass('on');
                });
            }else{
                $(".select").each(function(){
                    $(this).addClass('on');
                });
            }
            jisuan();

            // 计算删除商品长度
            if(lanYun.vue.isedit == 1){
                lanYun.vue.delLenght = $(".shop-box .on").length;
            }
        };
        //判断店铺是否全选中
        setStoreALLSelect = function(tis){
            var selfBox = $(tis).parent().parent();
            var zshu = selfBox.find('.cart-list .select').length;
            var xshu = selfBox.find('.cart-list .on').length;
            if(zshu == xshu){
                selfBox.prev().find('.select').addClass('on');
            }else{
                selfBox.prev().find('.select').removeClass('on');
            }
        };
        //判断是否全选中
        setALLSelect = function(){
            var zshu = $('.cart-list .select').length;
            var xshu = $('.cart-list .on').length;
            if(zshu == xshu){
                $('.jiesuan-box .select').addClass('on');
            }else{
                $('.jiesuan-box .select').removeClass('on');
            }
        };
        //数量加减
        setBuyNumClick = function(tis){
            //console.log(tis.dataset);
            var dst = tis.dataset;
            var info = $(tis).parents('.shop-info');
            var numBox = $('#'+dst.cartid);
            var _num = parseInt(numBox.text());
            if(dst.action=='dec'){
                if(_num <= 1) {
                    return;
                }
            }
            lanYun.post('storesCart/editNum',dst,function (ret) {
                if(ret.errcode==0) {
                    numBox.text(ret.buynum);
                    if(ret.buynum <= 1){
                        $(tis).addClass('no');
                    }else {
                        $(tis).siblings('.sub').removeClass('no');
                    }
                    //ret.stamsg && info.find('.stamsg').text(ret.stamsg);
                    if(ret.msg){
                        lanYun.toast(ret.msg,'middle');
                    }
                    jisuan();
                }
            });
        };
		//打开商品规格
        openSkuBox = function(tis) {
            var dst = tis.dataset;
            if(dst.ggstr == null){
                //lanYun.toast('此商品无规格','middle');
                return;
            }
            var num = $('#'+ dst.cartid).text();
            var list = lanYun.vue.Pdata.listData;
            var sdata = list[dst.index1].goods[dst.index2];
            sdata.frameName = api.frameName;//当前页面名称
            //sdata.notNum = 1;
            sdata.shoptype = "editsuk";
            sdata.buynum = num;
            sdata.goutype = 1;
            lanYun.openFrame('goods/sku/sku' , sdata, function(data) {
                lanYun.post('storesCart/editSku', {cartid:sdata.cartid,sid:sdata.sid,key:data.key,buynum:data.buynum} ,function (ret) {
                    //console.log(JSON.stringify(ret));
                    lanYun.toast(ret.msg,'middle');
                    if(ret.errcode==0) {
                        getData();
                        jisuan();
                    }
                },2);
            });
        };
        // 计算商品价格
        jisuan = function(){
            var zshu = 0,zjia = 0,vipzjia = 0;
            $(".shop-box .on").each(function() {
                var self = $(this);
                var _id = self.data('id');
                var _jiage = parseFloat(self.data('price'));
                var _vjiage = parseFloat(self.data('vipprice'));
                var _num = $('#'+_id).text() || 1;
                zjia = zjia + _jiage * _num;
                if(_vjiage == 0){
                    _vjiage = _jiage;
                }
                vipzjia = vipzjia + _vjiage * _num;
                zshu++;
            });
            if(lanYun.vue.Pdata.isvip == 1){
                $("#zjia").html(TOOL.priceToStr(vipzjia));
                lanYun.vue.zjia = vipzjia;
            }else {
                $("#zjia").html(TOOL.priceToStr(zjia));
                lanYun.vue.zjia = zjia;
            }
            coudan();
        };
        //凑单提示
        coudan = function (){
            if(lanYun.vue.isedit == 1){
                return;
            }
            var max = parseInt(lanYun.vue.max);
            var zjia = parseInt(lanYun.vue.zjia);
            if(zjia > max){
                lanYun.vue.coudanShow = 0;
            }else {
                lanYun.vue.coudanShow = 1;
            }
        }

        //-------------------------------------
        goPayClick = function () {
            var data = {};
            var sids = [];
            $(".shop-box .on").each(function() {
                sids.push(this.dataset.id);
            });
            data.cartids = sids;
            data.action = "cart";
            if (sids.length == 0){
                lanYun.toast('请选择商品');
                return;
            }
            //console.log(JSON.stringify(data));
            lanYun.openWin('ordert', {
                title : '确认订单',
                frameParam : data
            });
        };

        //凑单跳转
	    open_shoplist = function (tis) {
            lanYun.event('toallpinpai');
	        // var dst = tis.dataset;
	        // lanYun.openWin('main0/list_shop.html', {
	        //     win:'none',
	        //     frameParam : {id:dst.id},
	        // });
	    }

        //打开商品详情
        open_goods = function (tis) {
            var dst = tis.dataset;
            lanYun.openWin('goods/show', {
                win:'none',
                frameParam : dst,
            });
        }

        //打开品牌
		open_pingpai = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_pinpai.html', {
	            title : dst.title,
	            frameParam : dst,
	        });
	    }

    });
</script>

</html>
